<template>
    <div class=" header main">
         <span id="header">
            <span>
                <span>{{mname}}</span>
                <el-button type="primary" plain v-if="this.principal === null" @click="dd1()" style="height: 37px;width: 70px">登录</el-button>
                <el-button type="info" plain v-else @click="output()" style="height: 37px;width: 70px">注销</el-button>
            </span>
        </span>
        <!-- 导航栏-->
        <div style="width: 80%">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                     active-text-color="red"
                     style="font-weight:bold">
                <el-menu-item index="1" @click="$router.push('/shouye')">首页</el-menu-item>
                <el-menu-item index="2" @click="$router.push('/product')">商品展示</el-menu-item>
                <el-menu-item index="3" @click="$router.push('/activity')">专享活动</el-menu-item>
                <el-menu-item index="4" @click="$router.push('/shoppingCart')">购物车</el-menu-item>
                <el-menu-item index="5" @click="$router.push('/personalCenter')">个人中心</el-menu-item>
            </el-menu>
        </div>

        <!-- 顶部-->
        <div class="brandsDiv">
            <ul class="brands">
                <li clstag="channel|keycount|1839|brand_6_1">
                    <a href="//aokang.jd.com/" target="_blank">
                        <img width="100" height="50" src="//img12.360buyimg.com/cms/jfs/t5932/277/3198966620/3185/b342ac35/594ce99eNfe23133f.png!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_2">
                    <a href="//mall.jd.com/index-608668.html" target="_blank">
                        <img width="100" height="50" src="//img12.360buyimg.com/cms/jfs/t5287/185/1175725922/5743/9e724cfe/590c4568Na30ce06c.jpg!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_4">
                    <a href="https://mall.jd.com/index-20550.html" target="_blank">
                        <img width="100" height="50" src="//img12.360buyimg.com/cms/jfs/t24505/176/41565957/3539/bd10e5d3/5b2374ddN282c0469.jpg!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_3"><a href="//mall.jd.com/index-53379.html" target="_blank">
                    <img width="100" height="50" src="//img11.360buyimg.com/cms/jfs/t4546/238/4271202928/3497/7bb3b13b/590c45b3N81337e85.jpg!q95.webp"><em></em>
                </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_5"><a href="//qipilang.jd.com/" target="_blank">
                    <img width="100" height="50" src="//img11.360buyimg.com/cms/jfs/t5800/361/4425612374/2780/4f9a4d66/594de176Nab056268.png!q95.webp"><em></em>
                </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_6">
                    <a href="https://mall.jd.com/index-35324.html?cpdad=1DLSUE" target="_blank">
                        <img width="100" height="50" src="//img10.360buyimg.com/cms/jfs/t9898/257/294758224/3973/23d11cd0/59cb55f0Nb8e1704d.png!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_7"><a href="https://mall.jd.com/index-184352.html" target="_blank">
                    <img width="100" height="50" src="//img10.360buyimg.com/cms/jfs/t8755/133/778687037/3117/aca98a6d/59ae5f6dNbce03bb6.jpg!q95.webp"><em></em>
                </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_0">
                    <a href="//mall.jd.com/index-115708.html" target="_blank">
                        <img width="100" height="50" src="//img10.360buyimg.com/cms/jfs/t4288/308/3058772343/4004/4507d308/58d9dd35N3f993761.jpg!q95.webp"><em></em>
                    </a>
                </li>
                <li clstag="channel|keycount|1839|brand_6_8">
                    <a href="https://mall.jd.com/index-68668.html" target="_blank">
                        <img width="100" height="50" src="//img11.360buyimg.com/cms/jfs/t4180/289/3052404473/7699/f43f16da/58d9dc68N474601cd.jpg!q95.webp"><em></em>
                    </a>
                </li>
            </ul>
        </div>
        活动商品详情
        <center>
            <div style="width: 1150px;height: 330px;border: 1px solid #909399;border-radius: 30px;margin: 25px auto">

<!--                商品图片-->
                <div style="width: 200px;margin-top: 40px;height: 300px;float: left;margin: 50px 15px;">
                    <img style="width: 200px;height: 200px;border-radius: 20px" :src="getUrl(order.tbPrdInfoList.picPath)">
                </div>
<!--                商品信息-->
                <div style="width: 600px;height: 330px;float: left;margin: 0px 15px">
                    <td style="vertical-align:top;width: 700px;">
                        <div style="height: 260px;margin:10px auto;text-align:left;">
                            <br/>
                            <h3 style="color: #52c9ff">{{order.tbPrdInfoList.labelName}}</h3>

                            <p style="font-size: 15px">-----&nbsp;&nbsp;{{order.tbPrdInfoList.shortDesc}}&nbsp;&nbsp;-----</p>
                            <p style="font-size: 15px">商品原价<span class="price" style="color: #99a9bf">￥ <strong>{{activity.oldPrice}}</strong></span></p>

                            活动价格<span class="price" style="color: #99a9bf">￥ <strong>{{order.tbPrdInfoList.price}}</strong></span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            配送费<span class="price" style="color: #99a9bf">￥ <strong>{{order.postFee}}</strong></span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            合计总价<span class="price" style="color: red">￥ <strong>{{order.totalPrice}}</strong></span>
                            <br/><br/>
                            发货方式：<span class="price" style="color: black"><strong>{{order.postWay}}</strong></span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="price"><span style="font-size: 15px;color: #99a9bf">数量：</span> <strong>1</strong></span>
                            <br/><br/>
                            <span style="font-size: 10px">订单号：{{order.oid}}</span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="font-size: 10px">创建时间：{{order.createDate}}</span>

                            <p style="font-size: 15px">
                                <span style="color: #409EFF">收货人： </span>{{order.shippingName}}
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span style="color: #409EFF">联系方式： </span>{{order.shippingPhone}}<br><br>
                                <span style="color: #409EFF">收货地址： </span>{{order.shippingAddress}}
                            </p>
                            <br/><br/>
                        </div>
                    </td>
                </div>
<!--                确认付款按钮-->
                <div style="width: 200px;height: 230px;float: left;margin: 25px 0px">
                    <br/><br/><br/>
                    <el-button type="warning" round @click="pay()" plain style="width: 150px">立即付款</el-button>
                    <br/><br/><br/>
                    <el-button type="danger" round @click="upd(oid)" plain style="width: 150px">修改信息</el-button>
                </div>
            </div>
<!--            遮罩层-->
            <el-dialog title="订单信息" :visible.sync="dialogFormVisible">
                <el-form :model="order">
<!--                    {{order}}-->
                    订单号:{{this.oid}}
                    商品名:{{order.tbPrdInfoList.labelName}}
                    数量:1
                    <p>商品描述:{{order.tbPrdInfoList.shortDesc}}</p>
                    <el-form :inline="true" :model="newAddress" class="demo-form-inline">
                        <el-form-item label="地址">
                            <el-select v-model="addressList.realAddress" placeholder="收获地址">
                                <el-option v-for="(i,index) in addressList" :label="i.realAddress" :value="i.tid" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="update(newAddress)">确 定</el-button>
                </div>
            </el-dialog>
        </center>

        <!-- 底部-->
        <div>
            <center>
                <table width="80%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <img src="../assets/img/1004.jpg" width="100%">
                            <img src="../assets/img/2006.jpg" width="100%">
                        </td>
                    </tr>
                </table>
            </center>

            <div class="img">
                <img src="../assets/img/d0.png" style="width: 100%;">
            </div>
            <div class = "under">
                <a href="#" target="_blank" rel="nofollow">免费声明 </a>
                <a href="#" target="_blank" rel="nofollow">关于我们 </a>
                <a href="#" target="_blank" rel="nofollow">支付方式 </a>
                <a href="#" target="_blank" rel="nofollow">联系我们 </a>
                <a href="#" target="_blank" rel="nofollow">营业执照 </a>
                <a href="#" target="_blank" rel="nofollow">服务条款 </a>
            </div>
            <br>
            <div class="img">
                <img src="../assets/img/d1.png" style="width: 100%;">
            </div>
            <div class="footer-edit">
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);">Copyright © 1999 河南AAA有限公司 地址：郑州市新郑市AAA软件教育</span>
                </p>
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);"> 本网站部分图片来源于网络,如有侵权请联系我们,我们会尽快处理&nbsp;</span>
                </p>
                <p style="line-height: 1.0em;">
                    <span style="color: rgb(165, 165, 165);">&nbsp;</span>
                    <a href="http://www.baidu.com" target="_blank" style="color: rgb(165, 165, 165);">郑州昆旅国际旅行社太康路营业部</a></p>
                <p style="line-height: 1.0em;">
                <span style="color: rgb(165, 165, 165);">服务热线0371-888888&nbsp;
                    <span style="color: rgb(165, 165, 165);">微信：18838965238&nbsp; 15981917089&nbsp;</span>
                    在线QQ：1479430525&nbsp; 1479430525&nbsp; &nbsp;</span></p>
                <p style="line-height: 1.0em;">
                    <a href="https://www.baidu.com" target="_blank"></a>
                    <span style="color: rgb(165,165,165);">
                        <span style="color: rgb(153, 153, 153); font-family: PingFang SC;,Microsoft Yahei UI, Microsoft Yahei&quot;,Hiragino Sans GB;, Helvetica, STHeiti, sans-serif; background-color: rgb(249, 249, 249);">
                            旅行社业务经营许可证号 L-HEN-CJ00011
                        </span>
                    </span>
                    豫ICP备19990315号
                    <a/>
                </p>
            </div>

        </div>

    </div>
</template>

<script>
export default {
  name: 'OrderDetails',
  data () {
    return {
      dialogFormVisible: false,
      principal: sessionStorage.getItem('token'),
      accountId: sessionStorage.getItem('username'),
      mname: '已登录',
      order: null,
      activeIndex: '5',
      addressList: [],
      oid: '',
      newAddress: null,
        newPrice:'',
        activity:"",
    }
  },
  created () {
    if (this.principal === null) {
      this.mname = '未登录'
      this.$message({
        type: 'info',
        message: '请先登录!'
      })
      this.$router.push('/login')
    } else {
      this.oid = this.$route.query.oid
      // this.$route.query.oid
        let tid = '';
      this.$http.post('product/order/findByOid', {oid: this.$route.query.oid}).then(data => {
          this.order = data
          console.log(data)
          tid = data.tid;
          this.$http.get('product/activity/getNewPrice', {params:{
                  tid:tid
              }}).then(data => {
              console.log(data)
              this.activity = data.msg;
              this.order.tbPrdInfoList.price = data.msg.newPrice;
          })
      })


      this.$http.post('order/address/findByTbid', {accountId: this.accountId}).then(data => {
        this.addressList = data
      })
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      // console.log(key, keyPath)
    },
    dd1 () {
      this.$router.push('/login')
    },
    output () {
      this.$router.replace('product')
      sessionStorage.clear()
      localStorage.clear()
      this.$router.go(0)
    },
    // 获取图片
    getUrl (picPath) {
      return `http://localhost:8092/product/product/findProductPicByPath?name=` + picPath
    },
      // 立即付款
    pay () {
      this.$http.post('product/order/pay').then(data => {
        // console.log(data)

      })
    },
    upd (oid) {
      this.dialogFormVisible = true
      this.$http.post('product/address/findByTbid', {accountId: this.accountId}).then(data => {
        this.addressList = data
      })
      // console.log(oid)
    },
    update (newAddress) {
      // console.log(newAddress)
    }
  }
}
</script>

<style scoped>
    #header
    {
        position: absolute;
        top: 25px;
        bottom: auto;
        left: -5px;
        width: 100%;
        height: 38px;
        overflow: hidden;
    }
    /* Header's buttons. */
    #header > span
    {
        float: right;
        width: 200px;
    }
    #header > span > button
    {
        position: absolute;
    }
    #header > span > span
    {
        padding: 0px 8px 16px 0px;
        line-height: 40px;
    }

    .brandsDiv{
        margin: auto;
        /*border: 1px solid black;*/
    }
    .brands{
        width: 75%;
        height: 50px;
        list-style: none;
        /*border: 1px solid black;*/
        margin: auto;
    }
    .brands li{
        float: left;
        margin: 10px 10px;
    }
</style>
